import 'package:flutter/material.dart';
import 'package:netstorage/model/CommonModel.dart';
import 'package:netstorage/model/grid_nav.dart';
import 'package:netstorage/model/hotel.dart';

class GridNavWidget extends StatelessWidget {
  final GridNav? gridNav;
  const GridNavWidget({super.key,required this.gridNav});

  @override
  Widget build(BuildContext context) {
    return
      Container(
        margin: const EdgeInsets.fromLTRB(7,4,7,4),
        child: PhysicalModel(
          color: Colors.transparent,// 透明色
          borderRadius: BorderRadius.circular(6),// 裁切圆角
          clipBehavior: Clip.antiAlias,// 才起的圆角抗锯齿
          child: Column(
            children: _gridNavItems(context),
          ),

        )
      );
  }

  // 创建矩形导航区域（包含从上到下的3个区域）
  _gridNavItems(BuildContext context) {
    List<Widget> items = [];
    items.add(_gridNavItem(context, gridNav?.hotel, true));
    items.add(_gridNavItem(context, gridNav?.flight, false));
    items.add(_gridNavItem(context, gridNav?.travel, false));
    return items;
  }

  // 矩形导航条从上到下的其中一个导航区域
  Widget _gridNavItem(BuildContext context,Hotel? gridNavItem, bool isFirst) {
    List<Widget> items = [];
    items.add(_mainItem(context,gridNavItem?.mainItem));// 左侧大图片
    items.add(_doubleItem(context,gridNavItem?.item1,gridNavItem?.item2));
    items.add(_doubleItem(context,gridNavItem?.item3,gridNavItem?.item4));


    // 内层，左右排列
    List<Widget> expandItems = [];
    for(var item in items){
      // 设置每个 item 平分间距
      expandItems.add(Expanded(child: item, flex: 1));
    }

    // 设置渐变色
    // Color startColor = Color(int.parse('0xff${gridNavItem?.startColor ?? Colors.red}'));
    // Color endColor = Color(int.parse('0xff${gridNavItem?.endColor ?? Colors.green}'));
    return Container(
      height: 88,
      margin: isFirst ? null : const EdgeInsets.only(top: 3),
      decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.red,Colors.blue])),
      child: Row(children: expandItems,),
    );
  }

  Widget _mainItem(BuildContext context, CommonModel? model) {
    return _wrapGesture(context,model,
        Stack(
          alignment: AlignmentDirectional.topCenter,
          children: [
            Image.network(
              model?.icon ?? 'https://xdfznh.club/kbp/flutter/proj/%E5%8D%A1%E9%80%9A%E9%85%92%E5%BA%97.png',
              fit: BoxFit.contain, height: 88, width: 121,
              alignment: AlignmentDirectional.bottomEnd,
            ),
            Container(
              margin: const EdgeInsets.only(top: 11),
              child: Text(model?.title ?? '',style: const TextStyle(fontSize: 14,color: Colors.white)),
            )
          ],
    ));
  }

  // 创建手势包裹器
  Widget _wrapGesture(BuildContext context, CommonModel? model, Widget widget){
    return GestureDetector(
      onTap: (){},
      child: widget,
    );
  }

  Widget _doubleItem(BuildContext context, CommonModel? topItem, CommonModel? bottomItem) {
    return Column(
      children: [
        Expanded(child: _item(context,topItem,true)),
        Expanded(child: _item(context,bottomItem,false))
      ],
    );
  }

  _item(BuildContext context, CommonModel? item, bool first) {
    BorderSide borderSide = const BorderSide(width: 0.8, color: Colors.white);
    return Container(
      decoration: BoxDecoration(
        border: Border(
          left: borderSide,bottom: first ? borderSide : BorderSide.none
        )
      ),
      child: _wrapGesture(
        context, item,
        Center(
          child: Text(item?.title ?? '',style: const TextStyle(fontSize: 14, color: Colors.white),),
        )
      ),
    );
  }
}
